<template>
  <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="100px"
      >
      <el-form-item label="织板编码" prop="materialCode">
          <el-input
            v-model="queryParams.materialCode"
            placeholder="请输入织板编码"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="供应商编号" prop="supplierId">
          <el-input
            v-model="queryParams.supplierId"
            placeholder="请输入供应商编号"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        
        <el-form-item label="批次码" prop="batchCode">
          <el-input
            v-model="queryParams.batchCode"
            placeholder="请输入批次码"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
          >
            <Icon icon="ep:download" class="mr-5px" /> 导出
          </el-button>
<!--          <el-button type="primary" @click="printHandle">打印</el-button>-->
        </el-form-item>
      </el-form>
    </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
      <el-table v-loading="loading" :data="list">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="箱码" align="center" prop="id" />
        <el-table-column label="织板编码" align="center" prop="materialCode" />
        <el-table-column label="供应商名称" align="center" prop="supplierName" />
        <el-table-column label="供应商编号" align="center" prop="supplierId" />
        <el-table-column label="批次码" align="center" prop="batchCode" />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <!-- 用户导入对话框 -->
    <supplierImportForm ref="importFormRef" @success="getList" />
  </template>
  
  <script lang="ts" setup>
  import * as batchCodeApi from '@/api/hcxly/batchCode/Index'
  import download from '@/utils/download'
  import { getLodop } from '@/utils/LodopFuncs' //导入打印模块
  
  defineOptions({ name: 'batchCode' })
  
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const list2 = ref([]) // 列表的数据
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    materialCode: undefined,
    supplierId : undefined,
    batchCode : undefined
  })

  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中
  
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await batchCodeApi.getBatchCode(queryParams)
      // console.log(data)
      list.value = data.list
      total.value = data.total
      /** 查询列表不分页 */
      const data2 = await batchCodeApi.getBatchCodeList(queryParams)
      // console.log(data)
      list2.value = data2.list
    } finally {
      loading.value = false
    }
  }
  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /** 导出按钮操作 */
  const handleExport = async () => {
    try {
      // 导出的二次确认
      // await message.exportConfirm()
      // 发起导出
      exportLoading.value = true
      const data = await batchCodeApi.exportbatchCode(queryParams)
      download.excel(data, '箱码导出数据.xls')
    } catch {
    } finally {
      exportLoading.value = false
    }
  }

  /** 打印按钮操作 */
  const printHandle = async () => {
    // await prints(3,res.data.items); //入参是数组
      let LODOP = getLodop()  //调用getLodop获取LODOP对象
　　　LODOP.PRINT_INIT("")  //打印初始化
      LODOP.SET_PRINT_PAGESIZE(0, 1000, 500, "箱码打印"); //设定纸张大小
      // LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "30%"); //设置缩放
      // LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, ""); //设置窗口
      　　　 console.log(list2.value)
       for(let item of list2.value){
        // console.log(item)
        LODOP.ADD_PRINT_TEXT(20, 0, '100%', '100%', '北海龙亿运动器材有限公司') //打印文本
        LODOP.SET_PRINT_STYLEA(0,"FontSize",16)
        LODOP.SET_PRINT_STYLEA(0,"Alignment",2)
        LODOP.ADD_PRINT_TEXT(70, 20, 260, '100%', '物料名称：'+item.materialCode) //打印文本
        LODOP.SET_PRINT_STYLEA(0,"FontSize",14)
        LODOP.ADD_PRINT_TEXT(110, 20, 260, '100%', '物料批次：'+item.batchCode)
        LODOP.SET_PRINT_STYLEA(0,"FontSize",14)
        LODOP.ADD_PRINT_TEXT(150, 20, '100%', '100%', '供应商：'+item.supplierName)
        LODOP.SET_PRINT_STYLEA(0,"FontSize",14)
        LODOP.ADD_PRINT_BARCODE(65,270,85,85,'QRCode',item.id) //打印二维码
        LODOP.NEWPAGE();
       }
　　　 LODOP.PREVIEW()
　　　　　　//LODOP.PRINT()

  }

  /** 初始化 **/
  onMounted(() => {
    getList()
  })
  
  </script>
